<!--
  运营-招聘管理-【面试列表/安排】
 -->
<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form
      ref="queryParams"
      :model="queryParams"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="职位" prop="jobName">
        <el-input v-model="queryParams.jobName" clearable />
      </el-form-item>
      <el-form-item label="状态" prop="inviteResult">
        <el-select v-model="queryParams.inviteResult" clearable>
          <el-option
            v-for="item in inviteResultType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式" prop="phoneNumber">
        <el-input v-model="queryParams.phoneNumber" clearable />
      </el-form-item>
      <el-form-item label="面试时间" prop="date">
        <el-date-picker
          v-model="queryParams.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
        >搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="序号" type="index" />
      <el-table-column label="职位名称" align="center" prop="jobName" />
      <el-table-column label="面试学生" align="center" prop="studentName" />
      <el-table-column label="手机号码" align="center" prop="phoneNumber" />
      <el-table-column label="邮箱地址" align="center" prop="email" />
      <el-table-column
        label="面试日期"
        align="center"
        prop="inviteDate"
        width="180"
        sortable
      >
        <template slot-scope="scope">
          <span>{{ moment(scope.row.inviteDate).format("yyyy-MM-DD") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投递状态" align="center">
        <template slot-scope="scope">
          {{ '确认邀约' || scope.row.inviteResult }}</template>
      </el-table-column>
      <el-table-column label="反馈状态" align="center" prop="inviteResult">
        <template slot-scope="scope">
          {{ scope.row.inviteResult | returnStatus }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <!-- 简历状态，resumeStatus（投递过程的工单状态）0 未查看简历、1 已查看简历、2 已发送面试邀约、3 已确认面试邀约、4 已拒绝面试邀约、5 已面试反馈 -->
          <!--  *简历状态（新），resumeStatus（投递过程的工单状态）
 *  0 投递成功，企业未查看简历、
 *  1 企业已查看投递记录、
 *  2 已发送面试邀约、
 *  3 学生已查看 、
 *  4 已拒绝面试邀约、
 *  5 已确认面试邀约、
 *  6 学生已反馈，企业未反馈、
 *  7 企业已反馈，学生未反馈、
 *  8 都反馈，结束 -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleCheck(scope.row)"
          >查看</el-button>
          <el-button
            v-if="Number(scope.row.status) === 5 || Number(scope.row.status) === 6"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleInvite(scope.row)"
          >面试反馈</el-button>
          <el-button
            v-if="Number(scope.row.status) === 7 || Number(scope.row.status) === 8"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleInvite(scope.row, true)"
          >查看反馈结果</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      :page-sizes="[10]"
      @pagination="getList"
    />
    <el-dialog title="面试反馈" :visible.sync="dialogVisible" width="50%">
      <el-form
        ref="feedbackForm"
        :model="feedbackForm"
        size="small"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="面试结果" prop="inviteResult">
          <el-radio-group
            v-model="feedbackForm.inviteResult"
            :disabled="isCheck"
          >
            <el-radio
              v-for="item in inviteResultType"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="评价/原因" prop="evaluation">
          <el-input
            v-model="feedbackForm.evaluation"
            :disabled="isCheck"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            placeholder="请输入评价/原因"
            :maxlength="250"
            :show-word-limit="true"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelInvite">取 消</el-button>
        <el-button type="primary" @click="createInterview">提交</el-button>
      </span>
    </el-dialog>
    <!-- 查看面试详情 -->
    <el-drawer
      title="应聘详情"
      size="90%"
      :visible.sync="detailDialog"
      direction="rtl"
    >
      <InterviewDetail
        v-if="currentRow"
        ref="interviewDetail"
        :job-id="currentRow.jobId"
        :resume-id="currentRow.sendRecordId"
        :invite-recored-id="currentRow.id"
        @openFeedback="openFeedback"
      />
    </el-drawer>
  </div>
</template>

<script>
import {
  getInvitationRecord,
  updateInvite
} from '@/api/company-admin-api/hireManage/index.js'
import { inviteResultType } from '@/utils/frontDataDict.js'
import { deepClone } from '../../../utils'
import moment from 'moment'
import InterviewDetail from './interviewDetail.vue'
export default {
  name: 'Company',
  components: { InterviewDetail },
  filters: {
    returnStatus(status) {
      if (status === '') {
        return '未反馈'
      } else {
        return inviteResultType.find(
          (item) => Number(item.value) === Number(status)
        )?.label
      }
    }
  },
  data() {
    return {
      detailDialog: false,
      moment: moment,
      feedbackForm: {
        inviteResult: '0', // 面试结果 inviteResultType 0 结果待定、1 面试通过、2 未通过、3 未赴约、4 已谢绝
        evaluation: '' // 企业评价
      },
      rules: {
        evaluation: [
          {
            required: true,
            message: '评价不能为空',
            trigger: 'blur'
          }
        ],
        inviteResult: [
          {
            required: true,
            message: '面试结果不能为空',
            trigger: 'blur'
          }
        ]
      },
      dialogVisible: false, // 面试邀约弹窗
      // 面试结果 inviteResultType 0 面试通过、1 未通过、2 已谢绝、3 结果待定、4 未赴约
      inviteResultType: inviteResultType,
      // 遮罩层
      loading: true,
      // 未发布-总条数
      total: 0,
      // 发布中列表
      list: [],
      // 简历列表
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        inviteResult: '', // 反馈结果类型
        jobName: '', // 职位名称
        status: ['5', '6', '7', '8'], // 面试邀约状态
        phoneNumber: '', // 手机号
        date: [] // 面试日期范围
      },
      currentRow: null,
      isCheck: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    openFeedback() {
      this.detailDialog = false
      this.handleInvite(this.currentRow)
    },
    cancelInvite() {
      this.feedbackForm = this.$options.data().feedbackForm
      this.dialogVisible = false
    },
    // 查看面试详情
    handleCheck(row) {
      this.currentRow = deepClone(row)
      this.detailDialog = true
      setTimeout(() => {
        this.$refs.interviewDetail.init(this.currentRow)
      })
    },
    /**
     * @desc 批量创建面试邀约
     * @param {Object} data 统一的面试邀约条件，后续组装到所有的批量数据里
     */
    createInterview() {
      this.$refs.feedbackForm.validate((boo) => {
        if (boo) {
          const interviewItem = {
            companyId: '', // 企业id
            companyName: '', // 企业名称
            email: '', // 邮箱
            evaluation: '', // 面试评价
            feedback: '', // 学生评价/原因,
            id: '', // 邀约id
            inviteAddress: '', // 面试地址
            inviteContent: '', // 面试描述内容,
            inviteDate: '', // 面试邀约日期
            inviteResult: '', // 原因
            inviteWay: '', // 邀约方式
            jobId: '', // 职位id
            jobName: '', // 职位名称
            noticeItem: '', // 注意事项
            phoneNumber: '', // 手机号
            publisherId: '', // 发布人id
            publisherName: '', // 发布人姓名
            sendRecordId: '', // 发送记录id
            status: '', // 状态
            studentId: '', // 学生id
            studentName: '', // 学生姓名
            userId: '' // 用户id
          }
          Object.assign(this.currentRow, this.feedbackForm)
          for (const key in interviewItem) {
            if (Object.hasOwnProperty.call(this.currentRow, key)) {
              interviewItem[key] = this.currentRow[key]
            }
          }
          /**
            * *简历状态（新），resumeStatus（投递过程的工单状态）
            *  0 投递成功，企业未查看简历、
            *  1 企业已查看投递记录、
            *  2 已发送面试邀约、
            *  3 学生已查看 、
            *  4 已拒绝面试邀约、
            *  5 已确认面试邀约、
            *  6 学生已反馈，企业未反馈、
            *  7 企业已反馈，学生未反馈、
            *  8 都反馈，结束
           */
          if (
            interviewItem.feedback === '' ||
            interviewItem.feedback === null
          ) {
            interviewItem.status = '7'
          } else {
            interviewItem.status = '8'
          }
          updateInvite(interviewItem).then((res) => {
            if (res.code === 0 && res.data) {
              this.$message.success('反馈成功')
              this.cancelInvite()
              this.getList()
            }
          })
        }
      })
    },
    // 打开面试邀约弹窗
    handleInvite(row, isCheck = false) {
      // 单个
      this.isCheck = isCheck
      this.currentRow = deepClone(row)
      if (isCheck) {
        Object.assign(this.feedbackForm, this.currentRow)
      }
      this.dialogVisible = true
    },
    // 简历列表接口数据
    getList() {
      this.loading = true
      // 处理查询参数
      const queryParams = deepClone(this.queryParams)
      const params = {}
      for (const key in queryParams) {
        if (queryParams[key] !== '' && queryParams[key] !== null) {
          params[key] = queryParams[key]
        }
      }
      if (params.date.length === 2) {
        params.beginInviteDate = params.date[0]
        params.endInviteDate = params.date[1]
      }
      delete params.date
      // 执行查询
      getInvitationRecord(params).then((res) => {
        if (res.code === 0 && res.data) {
          const list = deepClone(res.data.list)
          this.list = list
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    // 重制搜索条件
    resetQuery() {
      this.queryParams = this.$options.data().queryParams
      this.handleQuery()
    }
  }
}
</script>
